<template>
  <div class="course-detail">
    <el-container>
      <el-aside width="320px">
        <div class="course-detail-img">
          <div class="img-box">
            <img :src="coverImg(courseInfo)" />
          </div>
        </div>
      </el-aside>
      <el-main style="padding: 0 0 0 20px">
        <div class="course-detail-info">
          <h1>{{ courseInfo.title }}</h1>
          <el-button class="btn-join" type="success" round @click="handleLearn"
            >开始学习</el-button
          >
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash'
import setInfo from '@/mixins/setInfo.js'
export default {
  mixins: [setInfo],
  data() {
    return {
      courseId: '',
      courseInfo: {},
      joinFlag: false,
      resData: [],
    }
  },
  mounted() {
    this.courseId = this.$route.query.id
    this.getInfo()
    this.$bus.$on('sendCourseChapter', (v) => {
      let res = cloneDeep(v)
      this.resData = this.flatObj(res).filter((v) => v.type != 1 && v.type != 2)
    })
  },
  beforeDestroy() {
    this.$bus.$off('sendCourseChapter')
  },
  methods: {
    //课程详情
    async getInfo() {
      let res = await this.$store.dispatch('queryOpenApiSysCourse', {
        id: this.courseId,
      })
      this.courseInfo = res.data[0]
      this.$bus.$emit('sendCourseInfo', this.courseInfo)
    },
    //开始学习
    async handleLearn() {
      //1.判断有没有登录
      let userId = this.$store.getters.userId
      if (!userId) {
        this.loginTip()
        return
      }
      //2.判断课程有无课件资源
      if (!this.resData.length) {
        this.warnMsg('本课程暂无学习资源')
        return
      }
      //3.判断有没有加入学习
      let joinFlag = await this.checked()
      if (joinFlag) {
        await this.handleJoin()
      }
      //4.跳转
      this.$router.push({
        name: 'course-home-play',
        query: { id: this.courseId },
      })
    },
    //查询是否已加入学习
    async checked() {
      let res = await this.$store.dispatch(
        'queryOneSysCourseStudent',
        this.courseId,
      )
      return res.msg == 0
    },
    //加入学习
    async handleJoin() {
      let userId = this.$store.getters.userId
      let obj = {
        studentId: userId,
        auditStatus: '2',
        orderBy: '10',
        courseId: this.courseId,
        courseOriginator: this.courseInfo.createBy,
      }
      await this.$store.dispatch('addSysCourseStudent', obj)
    },
  },
}
</script>
<style scoped lang="scss">
.course-detail {
  .course-detail-img {
    .img-box {
      width: 100%;
      height: 200px;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #eee;
      box-sizing: border-box;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .course-detail-info {
    position: relative;
    height: 200px;
    h1 {
      font-size: 20px;
      color: #333;
    }
    .btn-join {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>